<template>
    <div class="cart">
        <header>
            我的购物车
        </header>
        <main>
            <dl v-for="(item,index) in cartList" :key="index">
                <dt>
                    <checkbox checked="false"></checkbox>
                    <image 
                        :src="`https://weapp.jasonandjay.com/fileupload${item.goodsImgUrl}`">
                    </image>
                </dt>
                <dd>
                    <h4>{{item.goodsName}}</h4>
                    <div>
                        <span></span>
                        <p>
                            <button size="mini" @click="subCart(item)">-</button>
                            <span>{{item.goodsWeight}}</span>
                            <button size="mini" @click="addCart(item)">+</button>
                        </p>
                    </div>
                </dd>
            </dl>
        </main>
        <footer>
            <checkbox :checked="checkAll" @change="changeAll"></checkbox>
            <span>合计:￥{{totalNum}}</span>  
        </footer>
    </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
export default {
    computed: {
        ...mapState(['cartList','checkAll']),
        totalNum(){
            return this.cartList.reduce((pre,val) => {
                return pre + (val.flag ? val.goodsWeight * val.goodsPrice : 0)
            },0)
        }
    },
    methods: {
        ...mapMutations(['addCart','subCart','changeAll'])
    }
}
</script>

<style lang="scss" scoped>
.cart{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    header{
        height: 80rpx;
        border-bottom: 1px solid #000;
    }
    main{
        height: 100%;
        dl{
            display: flex;
            padding: 10rpx;
            height: 180rpx;
            dt{
                flex: 1;
                image{
                    width: 100%;
                    height: 120rpx;
                }
            }
            dd{
                flex: 3;
            }
        }

    }
    footer{
        height: 80rpx;
        background: red;
        border-top: 1px solid #000;
        line-height: 80rpx;
        display: flex;
        justify-content: space-between;
    }
}
</style>
